<script setup lang="ts">
import { useSettingsStore } from '@/stores/modules/settings'
import { Expand, Fold } from '@element-plus/icons-vue'
import { toRefs } from 'vue'

const { menuCollapse } = toRefs(useSettingsStore())
const handleToggle = () => {
  menuCollapse.value = !menuCollapse.value
}
</script>

<template>
  <div class="collapse-btn" @click="handleToggle">
    <el-icon v-if="menuCollapse"><Expand /></el-icon>
    <el-icon v-else><Fold /></el-icon>
  </div>
</template>

<style scoped lang="scss">
.collapse-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
}
</style>
